<template>
  <div class="dimission">
    <div class="bgg">
      <div class="card_title">
        组员管理
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
        <div class="h24">
          <div class="flex row_bet flex_wrap">
            <a-radio-group v-model="status" style="margin-bottom: 5px;margin-left:5px;" @change="statusChange">
              <a-radio-button :value="1">
                在职组员
              </a-radio-button>
              <a-radio-button :value="2">
                离职组员
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <a-button v-if="status === 1" type="primary" class="br4" @click="drawershow = true">
          <a-icon type="plus"/>
          组员编辑
        </a-button>
        <a-button v-else type="primary" class="br4" @click="exportToExcel">导出</a-button>
      </div>
      <a-table
        v-if="status === 1"
        :columns="columns"
        :rowKey="activity => activity.id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="active" slot-scope="row">
          <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="doremovegroupuser(row.id)">
            <template slot="title">
              确认要移出改组员吗?
            </template>
            <a-button type="link">移出小组</a-button>
          </a-popconfirm>
          <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dogroupsetquit(row.id)">
            <template slot="title">
              确认该组员已经离职了吗?
            </template>
            <a-button type="link">组员离职</a-button>
          </a-popconfirm>
        </div>
      </a-table>
      <a-table
        v-else
        :columns="columns2"
        :rowKey="activity2 => activity2.id"
        :dataSource="activity2"
        :loading="loading2"
        @change="handleTableChange2"
        :pagination="pagination2"
      >
      </a-table>
    </div>
    <a-drawer
      title="组员编辑"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">需要操作的组员名称</div>
        <a-input v-model="username" placeholder="输入组员名称" class="chooseipt br4"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            zIndex: 1
          }"
        >
          <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit">
            {{ btnloading===true?'审核中...':'审核并加入小组' }}
          </a-button>
          <a-button style="float:right;" class="br4" :loading="btnloading2" @click="doaddgroupuser">
            {{ btnloading2===true?'加入中...':'加入小组' }}
          </a-button>
          <a-button
            style="float:right;margin-right: 8px;"
            class="br4"
            :loading="btnloading3"
            @click="getgroupexamineusser">
            {{ btnloading3===true?'审核中...':'审核' }}
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import {
    doaddgroupuser,
    dogroupsetquit,
    doremovegroupuser,
    getcrewlist,
    getgroupexamineusser,
    getgroupquitdata
  } from '@/api/crewApi'
  import moment from 'moment'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Dimission',
    data () {
      return {
        moment,
        drawershow: false,
        status: 1,
        columns: [
          {
            title: '组员ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '组员账号',
            // width: 150,
            align: 'center',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },

          {
            title: '入职时间',
            align: 'center',
            dataIndex: 'useTime',
            scopedSlots: {
              customRender: 'useTime'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        columns2: [
          {
            title: '组员ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '组员账号',
            // width: 150,
            align: 'center',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '上月预估',
            align: 'center',
            dataIndex: 'lastMonth_orderServiceFee',
            scopedSlots: {
              customRender: 'lastMonth_orderServiceFee'
            }
          },
          {
            title: '上月结算',
            align: 'center',
            // width: 500,
            dataIndex: 'lastMonth_cmServiceFee',
            scopedSlots: {
              customRender: 'lastMonth_cmServiceFee'
            }
          },
          {
            title: '本月预估',
            align: 'center',
            dataIndex: 'month_orderServiceFee',
            scopedSlots: {
              customRender: 'month_orderServiceFee'
            }
          },
          {
            title: '本月结算',
            align: 'center',
            dataIndex: 'month_cmServiceFee',
            scopedSlots: {
              customRender: 'month_cmServiceFee'
            }
          }
          // {
          //   title: '操作',
          //   align: 'center',
          //   scopedSlots: {
          //     customRender: 'active'
          //   }
          // }
        ],
        activity: [],
        activity2: [],
        loading: false,
        loading2: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        pagination2: {
          pageSize: 15,
          page: 1
        },
        username: '',
        btnloading: false,
        btnloading2: false,
        btnloading3: false
      }
    },

    computed: {},
    created () {
      this.getcrewlist(1, 15)
    },
    mounted () {
    },
    methods: {
      getgroupexamineusser () {
        this.btnloading3 = true
        getgroupexamineusser({
          user: this.username
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('审核成功!')
            this.btnloading3 = false
            // this.getcrewlist(1, 15)
            // this.username = ''
          } else {
            this.btnloading3 = false
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doaddgroupuser () {
        this.btnloading2 = true
        doaddgroupuser({
          user: this.username
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.btnloading = false
            this.btnloading2 = false
            this.$message.success('加入成功!')
            // this.getcrewlist(1, 15)
            // this.username = ''
          } else {
            this.btnloading = false
            this.btnloading2 = false
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getcrewlist () {
        this.loading = true
        getcrewlist().then(res => {
          console.log(res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.count
          this.pagination = pagination
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      dosubmit () {
        this.btnloading = true
        this.getgroupexamineusser()
        setTimeout(() => {
          this.doaddgroupuser()
        }, 300)
      },
      exportToExcel () {
        require.ensure([], () => {
          const tHeader = ['组员ID', '组员账号', '上月预估', '上月结算', '本月预估', '本月结算']// Excel的表格第一行的标题
          const filterVal = ['id', 'user', 'lastMonth_orderServiceFee', 'lastMonth_cmServiceFee', 'month_orderServiceFee', 'month_cmServiceFee'
          ]
          const list = this.activity2
          const excelName = '离职列表数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      onClose () {
        this.drawershow = false
        this.username = ''
      },
      doremovegroupuser (id) {
        doremovegroupuser({
          user_id: id
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('移出成功!')
            this.getcrewlist(1, 15)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      dogroupsetquit (id) {
        dogroupsetquit({
          user_id: id
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('已设置离职!')
            this.getcrewlist(1, 15)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getgroupquitdata (page, pagesize) {
        this.loading2 = true
        getgroupquitdata({
          page: page,
          pagesize: pagesize
        })
          .then(res => {
            // console.log(res)
            this.activity2 = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination2
            }
            pagination.total = res.data.count
            this.pagination2 = pagination
            this.loading2 = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getcrewlist(params.page, 15)
      },
      handleTableChange2 (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination2
        }
        pager.current = pagination.current
        this.pagination2 = pager
        this.fetch2({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch2 (params = {}) {
        // console.log('params:', params)
        this.loading2 = true
        this.getgroupquitdata(params.page, 15)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        if (this.status === 1) {
          this.getcrewlist(1, 15)
        } else {
          this.getgroupquitdata(1, 15)
        }
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .dimission {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

  }
</style>
